<template>
  <div>
    <content-header title="展览众筹"></content-header>

    <div class="content-wrap" :class="{'collapse':isCollapse}">
      <!-- <h4 class="xui-margin-bottom-xs">{{detail.title}}</h4> -->
      <div v-html="detail.content"></div>
      <div class="mask color-primary">
        <span v-if="isCollapse == true" @click="isCollapse = false">显示全部
          <i class="el-icon-caret-bottom "></i>
        </span>
        <span v-if="isCollapse == false" @click="isCollapse = true">收起
          <i class="el-icon-caret-top "></i>
        </span>
      </div>
    </div>

    <!-- 展览众筹页面列表 -->
    <div class="xui-grid-avg-2 xui-padding-horizontal-children-sm xui-margin-top">
      <div class="xui-margin-bottom" v-for="(item,index) in actList" :key="index">
        <router-link :to="`${routePath}/detail/${item.id}`">
          <div class="creative-act-card">
            <img-box :imgSrc="item.imgUrl" width="100%" height="230"></img-box>
            <div class="card-body">
              <h3 class="xui-text-truncate">{{item.title}}</h3>
              <div class="xui-fc">
                <span class="xui-fl color-gray">{{item.stStartTime}} ~ {{item.stEndTime}}</span>
                <span class="xui-fr color-gray">
                  <i class="iconfont icon-eye"></i> {{item.browsNum}}</span>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>

    <el-pagination background v-if="page.count" layout="prev, pager, next" :total="page.count" class="xui-margin-top xui-text-center"
      :current-page.sync="page.index" :page-size="page.size" @current-change="handlePage">
    </el-pagination>
  </div>
</template>

<script>
  import contentHeader from "@/components/widge/content-header";
  import imgBox from "@/components/widge/img-box";
  import pic from "@/assets/images/example/zhongchou.png";
  import {
    getWenChuangZongChouContent
  } from "@/api/list";
  import {
    getActList
  } from "@/api/specExhib";
  import {
    addBrowseNum
  } from "@/api/detail";
  import {
    parseTime
  } from "@/utils";

  export default {
    data() {
      return {
        isCollapse: true,
        detail: {},
        pic,
        actList: [],
        page: {
          index: 1,
          count: null,
          size: 8
        }
      };
    },
    components: {
      contentHeader,
      imgBox
    },
    computed: {
      routePath() {
        return this.$route.path;
      },
      needLogin() {
        return this.$store.state.user.OPEN_DIALOG_NEED_LOGIN;
      }
    },
    methods: {
      getActList() {
        getActList(this.page.index, this.page.size).then(res => {
          this.page.count = res.data.count;
          this.actList = res.data.recordsList;
        });
      },
      getDetail() {
        getWenChuangZongChouContent().then(res => {
          // console.log(res)
          this.detail = res.data.recordsList[0];
        });
      },
      handlePage() {
        this.getActList();
      }
    },
    mounted() {
      this.getActList();
      this.$nextTick(() => {
        this.getDetail();
      });
    },
    filters: {
      parseTime(time, cFormat) {
        console.log(time);
        let arr = time.split("-");
        let d = new Date();
        d.setFullYear(Number(arr[0]), Number(arr[1] - 1), Number(arr[2]));
        return parseTime(time, cFormat);
      }
    }
  };

</script>

<style lang="less" scoped>
  .content-wrap {
    overflow: hidden;
    position: relative;
    padding-bottom: 40px;
    .mask {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background: #fff;
      text-align: center;
      span {
        cursor: pointer;
      }
    }
  }

  .content-wrap.collapse {
    max-height: 300px;
  }

  .xui-grid-avg-2.xui-padding-horizontal-children-sm {
    margin-left: -5px;
    margin-right: -5px;
  }

  .creative-act-card {
    border: 1px solid #d2d2d2;
    transition: border-color 0.25s;

    .card-body {
      padding: 10px 15px;
      h3 {
        font-size: 17px;
        margin-bottom: 4px;
      }
    }
  }

  .creative-act-card:hover {
    border-color: #bf9c51;
  }

</style>
